<template>
    <el-select v-model="selectedValue"  placeholder="关键字" clearable filterable remote reserve-keyword
        :remote-method="remoteMethod" 
        @change="handleChange"
        :loading="loading">
        <el-option v-for="item in options" :key="item.value" :label="item.name" :value="item.code">
        </el-option>
    </el-select>

</template>

<script>
export default {
    props:["value","index"],
    data() {
        return {
            loading: false,
            obj: null,
            list: [
                {
                    code: 1,
                    type: 'x01',
                    name: '商品1',
                    price: 30.00,
                    remark: '备注',
                    nums: 100,
                },
                {
                    code: 2,
                    type: 'x01',
                    name: '商品2',
                    price: 20.00,
                    remark: '备注',
                    nums: 100,
                },
                {
                    code: 3,
                    type: 'x02',
                    name: '商品3',
                    price: 10.00,
                    remark: '备注',
                    nums: 100,

                },
            ],
            options: [

            ],
        }
    },
    computed: {
        selectedValue: {
            get() {
                return this.value;
            },
            set(val) {
                const res =  this.list.find(el => el.code === val)
                console.log('选中值',res)
                this.$emit('input', val,res,this.index);
            },
        },
    },
    watch: {
        selectedValue(v) {
            console.log(v,'下拉值')
        }
    },
    methods: {
        handleChange(value) {
            this.$emit('change', value);
        },
        remoteMethod(query) {
            console.log(query, '查询----')
            this.options = []
            if (query !== '') {
                this.loading = true;
                setTimeout(() => {
                    this.loading = false;
                    this.list.forEach(el => {
                        el.label = el.name
                        el.value = el.code
                        this.options.push(el)

                    })
                }, 200);
            } else {
                this.options = [];
            }
        }
    }
}
</script>